<template>
  <swiper
    class="swiper"
    :indicator-dots="indicatorDots"
    :autoplay="autoplay"
    :interval="interval"
    :duration="duration"
    :circular="circular"
  >
    <swiper-item v-for="(item, index) in list" :key="index">
      <view class="swiper-item uni-bg-red">
        <image class="swiper-img" :src="item.pic"></image>
      </view>
    </swiper-item>
  </swiper>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      circular: true,
      interval: 2000,
      duration: 500,
      list: []
    }
  },
  methods: {
    ...mapActions('slide', ['getSlide']),
    getData() {
      this.getSlide().then(res => {
        console.log(res)
        this.list = res.data
      })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style>
.swiper {
  height: 350rpx;
}

.swiper-img {
  width: 100%;
  height: 350rpx;
}
</style>
